<template>
	<view class="content">
		<view class="row">
			<view class="left_img" v-for="(item, index) in datas" :key="index">
				<navigator hover-class="fales" :url="'group-album-detail?album_id=' + item.album_id + '&groupid=' + groupid">
					<view class="img">
						<lazy-image
							class="lazy-image"
							:realSrc="item.visit_path"
						></lazy-image>
						<!-- :realSrc="item.img_list.data[0].visit_path" -->
					</view>
					<view class="text">
						<view class="title">
							<view class="name">{{ item.album_name }}</view>
							<view class="time">{{ item.crate_time }}</view>
						</view>
						<view class="number">{{ item.describe }}</view>
					</view>
				</navigator>
			</view>
			<view :class="{ is_show: isshow }" class="loading">{{ loadingText }}</view>
		</view>
	</view>
</template>

<script>
import lazyImage from '@/components/lazy-image.vue';
import util from '@/common/util.js';
export default {
	data() {
		return {
			groupid: '',
			placeholderSrc: this.defimg,
			datas: [],
			page: 1,
			loadingText: '加载中...',
			isshow: true,
			timer: null
		};
	},
	components: {
		lazyImage
	},
	onLoad(e) {
		this.groupid = e.groupid;
		this.getDataList(1, 8);
	},
	onPullDownRefresh: function() {
		this.getDataList(1, 8);
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	onReachBottom: function() {
		var _this = this;
		if (this.timer != null) {
			clearTimeout(this.timer);
		}
		this.isshow = false;
		this.loadingText = '加载中...';
		this.timer = setTimeout(function() {
			_this.page = _this.page + 1;
			_this.getData(_this.page, 8);
		}, 1000);
	},
	onNavigationBarButtonTap: function() {
		uni.switchTab({
			url: '../index/index'
		});
	},
	methods: {
		getDataList: function(page, pagesize) {
			this.$gapi
				.apiPost('user/photo/listsPhoto', {
					groupid: this.groupid,
					page: page,
					pagesize: pagesize
				})
				.then(res => {
					if (res.data.code == 200) {
						this.datas = res.data.data.data;
						this.datas.forEach((item, index) => {
							item.checked = false;
							item.crate_time = util.getFormatTime(item.crate_time);
							item.visit_path = item.img_list.data[0] ? item.img_list.data[0].visit_path : '';
						});
						var len = this.datas.length;
						this.datas.splice(len);
					} else if (res.data.code == 400) {
						this.isshow = true;
						uni.showToast({
							title: '没相册',
							mask: false,
							duration: 1500
						});
					}
				});
		},
		getData: function(page, pagesize) {
			this.$gapi
				.apiPost('user/photo/listsPhoto', {
					groupid: this.groupid,
					page: page,
					pagesize: pagesize
				})
				.then(res => {
					if (res.data.code == 200) {
						let datas = res.data.data.data;
						datas.forEach((item, index) => {
							item.checked = false;
							item.crate_time = util.getFormatTime(item.crate_time);
							item.visit_path = item.img_list.data[0] ? item.img_list.data[0].visit_path : '';
						});
						this.datas = this.datas.concat(datas);
						var len = this.datas.length;
						this.datas.splice(len);
					} else if (res.data.code == 400) {
						var _this = this;
						this.loadingText = '已加载全部';
						this.timer = setTimeout(function() {
							_this.isshow = true;
						}, 1000);
					}
				});
		}
	}
};
</script>

<style>
* {
	margin: 0;
	padding: 0;
}

.is_show {
	display: none;
}

.content {
	width: 100%;
	height: 100%;
}

.row {
}

.left_img {
	display: flex;
	align-items: center;
	padding: 30upx;
	line-height: 0;
	border-top: 20upx solid #fafafa;
	background: #ffffff;
}

.left_img:first-child {
	border-top: none;
}

navigator {
	width: 100%;
	display: inline-flex;
}

.img {
	width: 120upx;
	height: 120upx;
	margin-right: 40upx;
	background: #ffffff;
	box-shadow: 0px 1px 6px rgba(128, 128, 128, 0.1);
}

image {
	width: 120upx;
	height: 120upx;
}

.text {
	flex: 1;
}

.title {
	display: flex;
	justify-content: space-between;
	align-content: flex-start;
}

.title .name {
	color: #333;
	font-size: 34upx;
}

.title .time {
	color: #999;
	font-size: 26upx;
}

.number {
	font-size: 26upx;
	color: #666;
}

.loading {
	width: 100%;
	text-align: center;
	line-height: 80px;
}
</style>
